<template>
    <div>
        <div class="det-promotion det-click" v-if="active" @click="clickActivity">
            <div class="promotion-tit">促销</div>
            <div class="promotion-con">
                <div class="pro-det" v-for="(item, index) in active.description" :key="index">
                    <span class="con">{{item}}</span>
                </div>
            </div>
            <div class="more">...</div>
        </div>

        <!-- 促销信息 -->
        <div class="popup-hide" :class="{ show: showActivity }" @click.stop>
            <div class="popup-box">
                <div class="popup-tit"><em class="tit">促销信息</em><i class="close close-pop" @click="closeAll"></i></div>
                <div class="popup-con promotion-msg">
                    <div class="item" v-for="(item,index) in active.fullActiveList" :key="index">
                        <div class="item-tit">
                            <em class="tit-em">{{index + 1}}.</em>
                            <span class="tit-txt">{{item.description}}</span>
                        </div>
                        <div class="item-con">
                            <div class="gifts" v-for="(presentItem , presentIndex) in item.presentList" :key="presentIndex">
                                <span  class="gifts-img">
                                    <legend-image :pic="presentItem.pic" :isJD="presentItem.prodSource=='JD'"/>
                                </span>
                                <span  class="gifts-txt">{{presentItem.name}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <button class="popup-btn" @click="closeAll">我知道了</button>
            </div>
        </div>
        <!-- 促销信息 -->

    </div>
</template>
<script>
import legendImage from 'components/legendImage/legendImage';
export default {
    components: {
        legendImage
    },
    props: {
        active: [Object,String]
    },
    data() {
        return {
            showActivity: false
        }
    },
    methods: {
        clickActivity() {
            this.showActivity = true
        },
        closeAll() {
            this.showActivity = false
        }
    },    
}
</script>

<style lang="stylus" scoped>

</style>
